<template>
  <div id="backHomeView">
    <el-tabs :model-value="'first'" class="demo-tabs">
      <!--<el-tab-pane label="行车记录仪销售数据导入" name="first">-->
      <!--  <el-card shadow="hover">-->
      <!--    <div style="display: flex">-->
      <!--      <div style="flex: 1">-->
      <!--        <el-text tag="b" style="font-size: 18px"-->
      <!--          >行车记录仪销售数据导入-->
      <!--        </el-text>-->
      <!--      </div>-->
      <!--      <div style="flex: 1; text-align: right">-->
      <!--        <el-space>-->
      <!--          <el-button color="#6cbfbc" :icon="Search" style="color: white">-->
      <!--            查询-->
      <!--          </el-button>-->
      <!--          <el-button-->
      <!--            color="#6cbfbc"-->
      <!--            :icon="RefreshRight"-->
      <!--            style="color: white"-->
      <!--          >-->
      <!--            重置-->
      <!--          </el-button>-->
      <!--        </el-space>-->
      <!--      </div>-->
      <!--    </div>-->
      <!--    <div style="margin: 10px 0">-->
      <!--      <el-space>-->
      <!--        <el-text>营业部名称：</el-text>-->
      <!--        <el-select placeholder="选择营业部" style="width: 240px">-->
      <!--        </el-select>-->
      <!--        <el-text>月份：</el-text>-->
      <!--        <el-date-picker-->
      <!--          type="daterange"-->
      <!--          range-separator="至"-->
      <!--          start-placeholder="开始月份"-->
      <!--          end-placeholder="结束月份"-->
      <!--        />-->
      <!--      </el-space>-->
      <!--    </div>-->
      <!--  </el-card>-->
      <!--  <el-card shadow="never" style="margin-top: 10px">-->
      <!--    &lt;!&ndash; 表格工具栏 &ndash;&gt;-->
      <!--    <div class="toolbar" style="margin: 10px 0">-->
      <!--      &lt;!&ndash; 左侧工具栏 &ndash;&gt;-->
      <!--      <div>-->
      <!--        <el-button color="#6cbfbc" style="color: white">-->
      <!--          模版下载-->
      <!--        </el-button>-->
      <!--        <el-button color="#6cbfbc" style="color: white"> 导入</el-button>-->
      <!--      </div>-->
      <!--    </div>-->
      <!--    &lt;!&ndash; 列表 &ndash;&gt;-->
      <!--    <el-table-->
      <!--      :data="[-->
      <!--        {-->
      <!--          id: 1,-->
      <!--          title: 1,-->
      <!--          name: '广州天河营业部',-->
      <!--          month: '202501',-->
      <!--          num: 2300,-->
      <!--          price: '23.9',-->
      <!--        },-->
      <!--      ]"-->
      <!--      border-->
      <!--      highlight-current-row-->
      <!--      :header-cell-style="{ background: '#6cbfbc', color: 'white' }"-->
      <!--    >-->
      <!--      <el-table-column-->
      <!--        align="center"-->
      <!--        label="营业部名称"-->
      <!--        prop="name"-->
      <!--        show-overflow-tooltip-->
      <!--      ></el-table-column>-->
      <!--      <el-table-column-->
      <!--        align="center"-->
      <!--        label="月份"-->
      <!--        prop="month"-->
      <!--        show-overflow-tooltip-->
      <!--      ></el-table-column>-->
      <!--      <el-table-column-->
      <!--        align="center"-->
      <!--        label="销售额"-->
      <!--        prop="num"-->
      <!--        show-overflow-tooltip-->
      <!--      ></el-table-column>-->
      <!--      <el-table-column-->
      <!--        align="center"-->
      <!--        label="单价"-->
      <!--        prop="price"-->
      <!--        show-overflow-tooltip-->
      <!--      ></el-table-column>-->
      <!--      <el-table-column-->
      <!--        align="center"-->
      <!--        fixed="right"-->
      <!--        label="操作"-->
      <!--        width="150"-->
      <!--      >-->
      <!--        <el-space>-->
      <!--          <el-button text style="color: #6cbfbc"> 删除</el-button>-->
      <!--        </el-space>-->
      <!--      </el-table-column>-->
      <!--    </el-table>-->

      <!--    &lt;!&ndash; 分页 &ndash;&gt;-->
      <!--    <div class="pagination" style="padding: 20px 0; position: relative">-->
      <!--      <el-pagination-->
      <!--        style="position: absolute; right: 0"-->
      <!--        size="small"-->
      <!--        v-model:current-page="currentPage1"-->
      <!--        :page-size="100"-->
      <!--        background-->
      <!--        layout="total,prev,pager,next,jumper,sizes"-->
      <!--        :total="1000"-->
      <!--        @size-change="handleSizeChange"-->
      <!--        @current-change="handleCurrentChange"-->
      <!--      />-->
      <!--    </div>-->
      <!--  </el-card>-->
      <!--</el-tab-pane>-->
      <!--<el-tab-pane label="拯救金卡销售数据导入" name="second">-->
      <!--  <el-card shadow="hover">-->
      <!--    <div style="display: flex">-->
      <!--      <div style="flex: 1">-->
      <!--        <el-text tag="b" style="font-size: 18px"-->
      <!--          >拯救金卡销售数据导入-->
      <!--        </el-text>-->
      <!--      </div>-->
      <!--      <div style="flex: 1; text-align: right">-->
      <!--        <el-space>-->
      <!--          <el-button color="#6cbfbc" :icon="Search" style="color: white">-->
      <!--            查询-->
      <!--          </el-button>-->
      <!--          <el-button-->
      <!--            color="#6cbfbc"-->
      <!--            :icon="RefreshRight"-->
      <!--            style="color: white"-->
      <!--          >-->
      <!--            重置-->
      <!--          </el-button>-->
      <!--        </el-space>-->
      <!--      </div>-->
      <!--    </div>-->
      <!--    <div style="margin: 10px 0">-->
      <!--      <el-space>-->
      <!--        <el-text>营业部名称：</el-text>-->
      <!--        <el-select placeholder="选择营业部" style="width: 240px">-->
      <!--        </el-select>-->
      <!--        <el-text>月份：</el-text>-->
      <!--        <el-date-picker-->
      <!--          type="daterange"-->
      <!--          range-separator="至"-->
      <!--          start-placeholder="开始月份"-->
      <!--          end-placeholder="结束月份"-->
      <!--        />-->
      <!--      </el-space>-->
      <!--    </div>-->
      <!--  </el-card>-->
      <!--  <el-card shadow="never" style="margin-top: 10px">-->
      <!--    &lt;!&ndash; 表格工具栏 &ndash;&gt;-->
      <!--    <div class="toolbar" style="margin: 10px 0">-->
      <!--      &lt;!&ndash; 左侧工具栏 &ndash;&gt;-->
      <!--      <div>-->
      <!--        <el-button color="#6cbfbc" style="color: white">-->
      <!--          模版下载-->
      <!--        </el-button>-->
      <!--        <el-button color="#6cbfbc" style="color: white"> 导入</el-button>-->
      <!--      </div>-->
      <!--    </div>-->
      <!--    &lt;!&ndash; 列表 &ndash;&gt;-->
      <!--    <el-table-->
      <!--      :data="[-->
      <!--        {-->
      <!--          id: 1,-->
      <!--          title: 1,-->
      <!--          name: '广州天河营业部',-->
      <!--          month: '202501',-->
      <!--          num: 2300,-->
      <!--          price: '23.9',-->
      <!--        },-->
      <!--      ]"-->
      <!--      border-->
      <!--      highlight-current-row-->
      <!--      :header-cell-style="{ background: '#6cbfbc', color: 'white' }"-->
      <!--    >-->
      <!--      <el-table-column-->
      <!--        align="center"-->
      <!--        label="营业部名称"-->
      <!--        prop="name"-->
      <!--        show-overflow-tooltip-->
      <!--      ></el-table-column>-->
      <!--      <el-table-column-->
      <!--        align="center"-->
      <!--        label="月份"-->
      <!--        prop="month"-->
      <!--        show-overflow-tooltip-->
      <!--      ></el-table-column>-->
      <!--      <el-table-column-->
      <!--        align="center"-->
      <!--        label="销售额"-->
      <!--        prop="num"-->
      <!--        show-overflow-tooltip-->
      <!--      ></el-table-column>-->
      <!--      <el-table-column-->
      <!--        align="center"-->
      <!--        label="单价"-->
      <!--        prop="price"-->
      <!--        show-overflow-tooltip-->
      <!--      ></el-table-column>-->
      <!--      <el-table-column-->
      <!--        align="center"-->
      <!--        fixed="right"-->
      <!--        label="操作"-->
      <!--        width="150"-->
      <!--      >-->
      <!--        <el-space>-->
      <!--          <el-button text style="color: #6cbfbc"> 删除</el-button>-->
      <!--        </el-space>-->
      <!--      </el-table-column>-->
      <!--    </el-table>-->

      <!--    &lt;!&ndash; 分页 &ndash;&gt;-->
      <!--    <div class="pagination" style="padding: 20px 0; position: relative">-->
      <!--      <el-pagination-->
      <!--        style="position: absolute; right: 0"-->
      <!--        size="small"-->
      <!--        v-model:current-page="currentPage1"-->
      <!--        :page-size="100"-->
      <!--        background-->
      <!--        layout="total,prev,pager,next,jumper,sizes"-->
      <!--        :total="1000"-->
      <!--        @size-change="handleSizeChange"-->
      <!--        @current-change="handleCurrentChange"-->
      <!--      />-->
      <!--    </div>-->
      <!--  </el-card>-->
      <!--</el-tab-pane>-->

      <!--<el-tab-pane label="排班表数据导入" name="third">-->
      <!--  <el-card shadow="hover">-->
      <!--    <div style="display: flex">-->
      <!--      <div style="flex: 1">-->
      <!--        <el-text tag="b" style="font-size: 18px">排班表数据导入</el-text>-->
      <!--      </div>-->
      <!--      <div style="flex: 1; text-align: right">-->
      <!--        <el-space>-->
      <!--          <el-button color="#6cbfbc" :icon="Search" style="color: white">-->
      <!--            查询-->
      <!--          </el-button>-->
      <!--          <el-button-->
      <!--            color="#6cbfbc"-->
      <!--            :icon="RefreshRight"-->
      <!--            style="color: white"-->
      <!--          >-->
      <!--            重置-->
      <!--          </el-button>-->
      <!--        </el-space>-->
      <!--      </div>-->
      <!--    </div>-->
      <!--    <div style="margin: 10px 0">-->
      <!--      <el-space>-->
      <!--        <el-text>排班日期：</el-text>-->
      <!--        <el-date-picker-->
      <!--          type="daterange"-->
      <!--          range-separator="至"-->
      <!--          start-placeholder="开始日期"-->
      <!--          end-placeholder="结束日期"-->
      <!--        />-->
      <!--      </el-space>-->
      <!--    </div>-->
      <!--  </el-card>-->
      <!--  <el-card shadow="never" style="margin-top: 10px">-->
      <!--    &lt;!&ndash; 表格工具栏 &ndash;&gt;-->
      <!--    <div class="toolbar" style="margin: 10px 0">-->
      <!--      &lt;!&ndash; 左侧工具栏 &ndash;&gt;-->
      <!--      <div>-->
      <!--        <el-button color="#6cbfbc" style="color: white">-->
      <!--          模版下载-->
      <!--        </el-button>-->
      <!--        <el-button color="#6cbfbc" style="color: white"> 导入</el-button>-->
      <!--      </div>-->
      <!--    </div>-->
      <!--    &lt;!&ndash; 列表 &ndash;&gt;-->
      <!--    <el-table-->
      <!--      :data="[-->
      <!--        {-->
      <!--          id: 1,-->
      <!--          name: '广州天河营业部',-->
      <!--          month: '20250101',-->
      <!--          num: 23,-->
      <!--        },-->
      <!--      ]"-->
      <!--      border-->
      <!--      highlight-current-row-->
      <!--      :header-cell-style="{ background: '#6cbfbc', color: 'white' }"-->
      <!--    >-->
      <!--      <el-table-column-->
      <!--        align="center"-->
      <!--        label="营业部名称"-->
      <!--        prop="name"-->
      <!--        show-overflow-tooltip-->
      <!--      ></el-table-column>-->
      <!--      <el-table-column-->
      <!--        align="center"-->
      <!--        label="排班日期"-->
      <!--        prop="month"-->
      <!--        show-overflow-tooltip-->
      <!--      ></el-table-column>-->
      <!--      <el-table-column-->
      <!--        align="center"-->
      <!--        label="当日上班人数"-->
      <!--        prop="num"-->
      <!--        show-overflow-tooltip-->
      <!--      ></el-table-column>-->
      <!--      <el-table-column-->
      <!--        align="center"-->
      <!--        fixed="right"-->
      <!--        label="操作"-->
      <!--        width="150"-->
      <!--      >-->
      <!--        <el-space>-->
      <!--          <el-button text style="color: #6cbfbc"> 删除</el-button>-->
      <!--        </el-space>-->
      <!--      </el-table-column>-->
      <!--    </el-table>-->

      <!--    &lt;!&ndash; 分页 &ndash;&gt;-->
      <!--    <div class="pagination" style="padding: 20px 0; position: relative">-->
      <!--      <el-pagination-->
      <!--        style="position: absolute; right: 0"-->
      <!--        size="small"-->
      <!--        v-model:current-page="currentPage1"-->
      <!--        :page-size="100"-->
      <!--        background-->
      <!--        layout="total,prev,pager,next,jumper,sizes"-->
      <!--        :total="1000"-->
      <!--        @size-change="handleSizeChange"-->
      <!--        @current-change="handleCurrentChange"-->
      <!--      />-->
      <!--    </div>-->
      <!--  </el-card>-->
      <!--</el-tab-pane>-->

      <el-tab-pane label="营业部发行任务量数据导入" name="four">
        <el-card shadow="hover">
          <div style="display: flex">
            <div style="flex: 1">
              <el-text style="font-size: 18px" tag="b"
                >营业部发行任务量数据导入
              </el-text>
            </div>
            <div style="flex: 1; text-align: right">
              <el-space>
                <el-button :icon="Search" color="#6cbfbc" style="color: white">
                  查询
                </el-button>
                <el-button
                  :icon="RefreshRight"
                  color="#6cbfbc"
                  style="color: white"
                >
                  重置
                </el-button>
              </el-space>
            </div>
          </div>
        </el-card>
        <el-card shadow="never" style="margin-top: 10px">
          <!-- 表格工具栏 -->
          <div class="toolbar" style="margin: 10px 0">
            <!-- 左侧工具栏 -->
            <div>
              <el-button color="#6cbfbc" style="color: white">
                模版下载
              </el-button>
              <el-button color="#6cbfbc" style="color: white"> 导入</el-button>
            </div>
          </div>
          <!-- 列表 -->
          <el-table
            :data="[
              {
                id: '',
              },
            ]"
            :header-cell-style="{ background: '#6cbfbc', color: 'white' }"
            border
            highlight-current-row
          >
            <el-table-column
              align="center"
              label="时间（年）"
              prop="id"
              show-overflow-tooltip
            />
            <el-table-column
              align="center"
              label="营业部名称"
              prop="name"
              show-overflow-tooltip
            />
            <el-table-column
              align="center"
              label="考核类别"
              prop="month"
              show-overflow-tooltip
            />
            <el-table-column
              align="center"
              label="任务量"
              prop="num"
              show-overflow-tooltip
            />
            <el-table-column
              align="center"
              label="备注"
              prop="num"
              show-overflow-tooltip
            />
            <el-table-column
              align="center"
              fixed="right"
              label="操作"
              width="150"
            >
              <el-space>
                <el-button style="color: #6cbfbc" text> 删除</el-button>
              </el-space>
            </el-table-column>
          </el-table>

          <!-- 分页 -->
          <div class="pagination" style="padding: 20px 0; position: relative">
            <el-pagination
              v-model:current-page="currentPage1"
              :page-size="100"
              :total="1000"
              background
              layout="total,prev,pager,next,jumper,sizes"
              size="small"
              style="position: absolute; right: 0"
              @size-change="handleSizeChange"
              @current-change="handleCurrentChange"
            />
          </div>
        </el-card>
      </el-tab-pane>
    </el-tabs>
  </div>
</template>
<script lang="ts" setup>
import { RefreshRight, Search } from "@element-plus/icons-vue";
import { ref } from "vue";

const currentPage1 = ref(5);

const handleSizeChange = (val: number) => {
  console.log(`${val} items per page`);
};
const handleCurrentChange = (val: number) => {
  console.log(`current page: ${val}`);
};
</script>

<style lang="scss" scoped>
#backHomeView {
  width: 98%;
  margin: 0 auto;

  :deep(.el-tabs__active-bar) {
    background-color: #6cbfbc;
  }

  :deep(.is-active) {
    color: #6cbfbc;
  }

  :deep(.el-table__header-wrapper) {
    background-color: #6cbfbc !important;
  }
}

.header {
  background-color: #6cbfbc !important;
}

:deep(.el-table__header) {
}
</style>
